

<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>在 Hexo 博客上添加可爱的 Live 2D 模型 - Xiaozhou`s Blog-小州的个人博客</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  <meta name="keywords" content="Blog,Java,Spring,SpringBoot,SSM,Linux">
  <meta name="description" content="在 Hexo 博客上添加可爱的 Live 2D 模型
...">
  <meta name="author" content="xiaozhou">
  <link rel="icon" href="/images/icons/favicon-16x16.png" type="image/png" sizes="16x16">
  <link rel="icon" href="/images/icons/favicon-32x32.png" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png" sizes="180x180">
  <meta rel="mask-icon" href="/images/icons/stun-logo.svg" color="#333333">
  
    <meta rel="msapplication-TileImage" content="/images/icons/favicon-144x144.png">
    <meta rel="msapplication-TileColor" content="#000000">
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="//at.alicdn.com/t/font_1445822_s6x2xcokxrl.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: 'https://gitee.com/xiaozhoujun/personal-drawing-bed/raw/master/loading.gif'
      },
      donate: {
        enable: true,
        alipay: '/images/theme/alipay.jpg',
        wechat: '/images/theme/wechat.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '/images/theme/welcome-image.jpg',
          api: 'https://api.ixiaowai.cn/gqapi/gqapi.php'
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: false,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'simple'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 5.3.0"></head>

<body class="lock-screen">
  <div class="loading"></div>
  


  <nav class="navbar">
    <div class="left">
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
    </div>
    <div class="center">在 Hexo 博客上添加可爱的 Live 2D 模型</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
  </nav>

  

<nav class="menu">
  <div class="menu-wrap">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/galleries/ " class="underline "> 相册</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/friends/ " class="underline "> 友链</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    <div class="row container">
      <div class="col-xl-3"></div>
      <div class="col-xl-6"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/post/cover.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">在 Hexo 博客上添加可爱的 Live 2D 模型</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>一月 26, 2021</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>1510</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content">
        <blockquote>
<p>本文原地址 ：<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/4b61d8702cfa">https://www.jianshu.com/p/4b61d8702cfa</a></p>
</blockquote>
<p>1.首先，安装 npm 包：</p>
<figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ada">npm install <span class="hljs-comment">--save hexo-helper-live2d</span><br></code></pre></td></tr></table></figure>
<p>2.然后在 hexo 的配置文件<code>_config.yml</code>(非主题配置文件)中添加如下配置，详细配置可以参考<a target="_blank" rel="noopener" href="https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md">文档</a></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">live2d:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">scriptFrom:</span> <span class="hljs-string">local</span><br>  <span class="hljs-attr">pluginRootPath:</span> <span class="hljs-string">live2dw/</span><br>  <span class="hljs-attr">pluginJsPath:</span> <span class="hljs-string">lib/</span><br>  <span class="hljs-attr">pluginModelPath:</span> <span class="hljs-string">assets/</span><br>  <span class="hljs-attr">tagMode:</span> <span class="hljs-literal">false</span><br>  <span class="hljs-attr">debug:</span> <span class="hljs-literal">false</span><br>  <span class="hljs-attr">model:</span><br>    <span class="hljs-attr">use:</span> <span class="hljs-string">live2d-widget-model-shizuku</span><br>  <span class="hljs-attr">display:</span><br>    <span class="hljs-attr">position:</span> <span class="hljs-string">right</span><br>    <span class="hljs-attr">width:</span> <span class="hljs-number">150</span><br>    <span class="hljs-attr">height:</span> <span class="hljs-number">300</span><br>  <span class="hljs-attr">mobile:</span><br>    <span class="hljs-attr">show:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure>
<p>3.然后下载模型，模型名称可以到<a target="_blank" rel="noopener" href="https://github.com/xiazeyu/live2d-widget-models">这里</a>参考，一些模型的预览可以在<a target="_blank" rel="noopener" href="https://huaji8.top/post/live2d-plugin-2.0/">这里</a>。</p>
<figure class="highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs apache"><span class="hljs-attribute">npm</span> install live<span class="hljs-number">2</span>d-widget-model-shizuku<br></code></pre></td></tr></table></figure>
<p>所有模型列表如下：</p>
<ul>
<li>  <code>live2d-widget-model-chitose</code></li>
<li>  <code>live2d-widget-model-epsilon2_1</code></li>
<li>  <code>live2d-widget-model-gf</code></li>
<li>  <code>live2d-widget-model-haru/01</code> (use <code>npm install --save live2d-widget-model-haru</code>)</li>
<li>  <code>live2d-widget-model-haru/02</code> (use <code>npm install --save live2d-widget-model-haru</code>)</li>
<li>  <code>live2d-widget-model-haruto</code></li>
<li>  <code>live2d-widget-model-hibiki</code></li>
<li>  <code>live2d-widget-model-hijiki</code></li>
<li>  <code>live2d-widget-model-izumi</code></li>
<li>  <code>live2d-widget-model-koharu</code></li>
<li>  <code>live2d-widget-model-miku</code></li>
<li>  <code>live2d-widget-model-ni-j</code></li>
<li>  <code>live2d-widget-model-nico</code></li>
<li>  <code>live2d-widget-model-nietzsche</code></li>
<li>  <code>live2d-widget-model-nipsilon</code></li>
<li>  <code>live2d-widget-model-nito</code></li>
<li>  <code>live2d-widget-model-shizuku</code></li>
<li>  <code>live2d-widget-model-tororo</code></li>
<li>  <code>live2d-widget-model-tsumiki</code></li>
<li>  <code>live2d-widget-model-unitychan</code></li>
<li>  <code>live2d-widget-model-wanko</code></li>
<li>  <code>live2d-widget-model-z16</code></li>
</ul>
<p>下载完之后，在 Hexo 根目录中新建文件夹 live2d_models，然后在 node_modules 文件夹中找到刚刚下载的 live2d 模型，将其复制到 live2d_models 中，然后编辑配置文件中的<code>model.use</code>项，将其修改为 live2d_models 文件夹中的模型文件夹名称。</p>
<p>一切就绪之后，用<code>hexo server</code>命令启动服务器，稍等一下就可以看到右下角出现了一个可爱的萌萌哒的妹纸！</p>
      </section>
      <section class="extra">
        
        
          <section class="donate">
  <div id="qrcode-donate">
    <img   class="lazyload" data-original="/images/theme/alipay.jpg" src="" >
  </div>
  <div class="icon">
    <a href="javascript:;" id="alipay"><i class="iconfont iconalipay"></i></a>
    <a href="javascript:;" id="wechat"><i class="iconfont iconwechat-fill"></i></a>
  </div>
</section>
        
        
        
  <nav class="nav">
    <a href="/2021/02/02/%E3%80%90Docker%E3%80%91win10%20%E7%8E%AF%E5%A2%83%E4%B8%8B%E5%AE%89%E8%A3%85%20Docker/"><i class="iconfont iconleft"></i>【Docker】win10 环境下安装 Docker</a>
    <a href="/2021/01/12/docker%20%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/">docker 常用命令<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
        <section class="comments">
  
  
<div id="valine"></div>
<script defer src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
  window.onload = function () {
    var loadValine = function () {
      new Valine({
        el: '#valine',
        app_id: "DT7lf4wjyGz3dzFvkNWkjDjw-gzGzoHsz",
        app_key: "0BFENrKLIvytrnTsCPNxF5tP",
        placeholder: "雁过留痕",
        avatar: "mp",
        pageSize: "10",
        lang: "zh-CN",
      });
    }
    if ( false ) {
      $("#comments-btn").on("click", function () {
        $(this).hide();
        loadValine();
      });
    } else {
      loadValine();
    }
  };
</script>

</section>
      
    </section>
  </div>
</article></div>
      <div class="col-xl-3">
        
          
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9C%A8-Hexo-%E5%8D%9A%E5%AE%A2%E4%B8%8A%E6%B7%BB%E5%8A%A0%E5%8F%AF%E7%88%B1%E7%9A%84-Live-2D-%E6%A8%A1%E5%9E%8B"><span class="toc-text">在 Hexo 博客上添加可爱的 Live 2D 模型</span></a></li></ol>
  </aside>

        
      </div>
    </div>
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=574385240 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#DA2E76'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://www.instagram.com/ "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#DA2E76'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconinstagram "></i>
      </a><a 
        href="https://github.com/xiaozhoujun "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:xiaozhou1650@gmail.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#DA2E76'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail "></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
    <div class="scrollbar j-scrollbar">
  <div class="scrollbar-current j-scrollbar-current"></div>
</div>
  
  
    
<script src="/js/color-mode.js"></script>

  
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/shizuku.model.json"},"display":{"position":"Left","width":150,"height":300},"mobile":{"show":true},"log":false});</script></body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>



  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>








<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>